<template>
  <div class="resourceBody">
    <div class="search">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-search"  ></i> 筛选搜索</span>
          <el-button type="primary" @click="resourceGetData()" size="small"
            >查询搜索</el-button
          >
          <el-button size="small" @click="searchFormRestart()" >重置</el-button>
        </div>
        <el-form
          :inline="true"
          ref="form"
          :model="searchForm"
          label-width="80px"
        >
          <el-form-item label="资源名称:">
            <el-input
              v-model="searchForm.nameKeyword"
              placeholder=""
            ></el-input>
          </el-form-item>
          <el-form-item label="资源路径:">
            <el-input v-model="searchForm.urlKeyword" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="资源分类">
            <el-select
              v-model="searchForm.categoryId"
              placeholder="全部"
              size="small"
              clearable
            >
              <el-option
                v-for="item in re_categorys"
                :key="item.categoryId"
                :label="item.name"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="addResource">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span> <i class="el-icon-tickets"></i> 数据列表</span>
          <el-button size="small" @click="categoryRouter()">资源分类</el-button>
          <el-button size="small" @click="resourceAdd()">添加</el-button>
        </div>
      </el-card>
      <el-dialog
        :title="isEdit ? '编辑用户' : '添加用户'"
        :visible.sync="dialogVisible"
        width="38%"
      >
        <el-form ref="form" :model="resourceForm" label-width="80px">
          <el-form-item label="资源名称:">
            <el-input
              v-model="resourceForm.name"
              placeholder="资源名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="资源别称:">
            <el-input
              v-model="resourceForm.nameZh"
              placeholder="资源别称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="资源路径:">
            <el-input
              v-model="resourceForm.url"
              placeholder="资源路径"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="资源分类">
            <el-select
              v-model="resourceForm.categoryId"
              placeholder="全部"
              size="small"
              clearable
            >
              <el-option
                v-for="item in re_categorys"
                :key="item.categoryId"
                :label="item.name"
                :value="item.categoryId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述:" class="desc">
            <el-input
              type="textarea"
              v-model="resourceForm.description"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="registerCancel()" size="small">取 消</el-button>
          <el-button type="primary" @click="registerDetermine()" size="small"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="resourceList">
      <el-card class="box-card">
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="resourceId" label="ID" width="70px">
          </el-table-column>
          <el-table-column prop="nameZh" label="资源名称"> </el-table-column>
          <el-table-column prop="url" label="资源路径"> </el-table-column>
          <el-table-column prop="description" label="描述"> </el-table-column>
          <el-table-column prop="createTime" label="添加时间">
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="text" @click="resourceUpdate(scope.row)"
                  >编辑</el-button
                >
                <el-button type="text" @click="resourceDelete(scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import resource from "@/api/resource";
import re_category from "@/api/re_category.js";
import { Message, MessageBox } from "element-ui";
const defaultResource = {
  resourceId: null,
  name: "",
  nameZh: "",
  url: "",
  categoryId: "",
  description: "",
};

const defaultSearchFrom = {
  nameKeyword: "",
  urlKeyword: "",
  categoryId: "",
};
export default {
  data() {
    return {
      input: "",
      dialogVisible: false,
      pageSize: 5,
      pageNum: 1,
      total: 0,
      isEdit: false,
      re_categorys: [],
      tableData: [],
      currentPage: 1,
      searchForm: Object.assign({}, defaultSearchFrom),
      resourceForm: Object.assign({}, defaultResource),
    };
  },
  created() {
    re_category.listAll().then((res) => {
      if (res.code === 200) {
        this.re_categorys = res.data;
      }
    });
    this.resourceGetData();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.resourceGetData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.resourceGetData();
    },

    searchFormRestart(){
      this.searchForm = Object.assign({},defaultSearchFrom)
      this.resourceGetData()
    },

    resourceDelete(row) {
      MessageBox.confirm("确定要删除该记录吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        resource.delete(row.resourceId).then((res) => {
          Message({
            message: "删除" + res.message,
            type: "success",
            duration: 5 * 1000,
          });
          this.tableData = this.tableData.filter((item) => {
            return item.resourceId != row.resourceId;
          });
        });
      });
    },
    categoryRouter() {
      this.$router.push("/user/resourceGateGory");
    },
    resourceGetData() {
      let categoryId =
        this.searchForm.categoryId === "" ? 0 : this.searchForm.categoryId;
      resource
        .list(
          this.searchForm.nameKeyword,
          this.searchForm.urlKeyword,
          categoryId,
          this.pageSize,
          this.pageNum
        )
        .then((res) => {
          this.total = res.data.total;
          this.tableData = res.data.list;
        });
    },

    transformResourceForm(dialogVisible, isEdit, resourceForm) {
      this.dialogVisible = dialogVisible;
      this.isEdit = isEdit;
      this.resourceForm = Object.assign({}, resourceForm);
    },
    resourceAdd() {
      this.transformResourceForm(true, false, defaultResource);
    },
    resourceUpdate(row) {
      this.transformResourceForm(true, true, row);
    },

    registerCancel() {
      this.dialogVisible = false;
    },
    registerDetermine() {
      MessageBox.confirm("确定要进行该操作吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          resource
            .update(this.resourceForm.resourceId, this.resourceForm)
            .then((res) => {
              Message({
                message: "修改成功",
                type: "success",
                duration: 5 * 1000,
              });
              this.resourceGetData();
              this.dialogVisible = false;
            });
        } else {
          resource.create(this.resourceForm).then((res) => {
            Message({
              message: "创建" + res.message,
              type: "success",
              duration: 5 * 1000,
            });
            this.resourceGetData();
            this.dialogVisible = false;
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.resourceBody {
  height: 91.3%;
  width: 100%;
  .search {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    .box-card {
      width: 95%;
      height: 124px;
      /deep/ .el-card__header {
        border: none;
        button {
          float: right;
          margin-left: 15px;
          margin-right: 5px;
          margin-top: 15px;
        }
        span {
          padding-top: 10px;
        }
        .clearfix {
          margin-top: -13px;
        }
      }
      /deep/ .el-card__body {
        position: relative;
        bottom: 35px;
        left: 20px;
        :first-child {
          height: 50px;
          p {
            width: 140px;
          }
          .el-input {
            height: 32px;
            .el-input__inner {
              width: 100%;
              height: 100%;
            }
          }
        }
        .el-form--inline .el-form-item {
          margin-left: 35px;
        }
      }
    }
  }
  .addResource {
    height: 130px;
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      height: 60.5px;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          float: right;
          margin-left: 15px;
          margin-right: 5px;
          margin-top: 15px;
        }
      }
    }
    /deep/ .el-form {
      width: 80%;
      padding-left: 55px;
      .el-form-item,
      .el-form-item__label,
      .el-form-item__content,
      .el-input,
      .el-input__inner {
        height: 32px;
        width: 250px;
      }
      .desc {
        height: 110px;
        .el-form-item__label,
        .el-form-item__content,
        .el-input,
        .el-textarea,
        .el-textarea__inner {
          height: 110px;
        }
      }
    }
  }
  .resourceList {
    line-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -12px;
    .box-card {
      width: 95%;
      /deep/ .el-card__header {
        border: none;
        .clearfix {
          position: relative;
          bottom: 12.5px;
        }
        button {
          position: relative;
          //top: 6px;
          left: 620px;
        }
      }
      /deep/ .el-card__body {
        .el-table__header tr,
        .el-table__header th {
          padding: 0;
          height: 48px;
        }
        .el-table__body tr,
        .el-table__body td {
          padding: 0;
          height: 50px;
        }
        .block {
          float: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
